<template>
    <div>
        <!-- <navView></navView> -->
        <carTop />
    </div>
    <div>
        <h3>收货地址</h3>
        <el-form ref="form" :model="sizeForm" label-width="auto" :label-position="labelPosition" :size="size">
            <el-form-item label="选择所在地">
                <el-select v-model="sizeForm.region" placeholder="请选择所在地">
                    <el-option label="北京" value="shanghai" />
                    <el-option label="上海" value="beijing" />
                    <el-option label="湖北" value="hubei" />
                    <el-option label="贵州" value="guizhou" />
                    <el-option label="四川" value="sichuan" />
                    <el-option label="云南" value="yunnan" />
                    <el-option label="广州" value="guangzhou" />
                    <el-option label="台湾" value="taiwan" />
                    <el-option label="浙江" value="zhejiang" />
                </el-select>
            </el-form-item>
            <el-form-item label="详细地址">
                <el-input placeholder="请填写详细到门牌号、楼层及房间号的详细地址" v-model="sizeForm.address" />
            </el-form-item>
            <el-form-item label="邮政编码">
                <el-input v-model="sizeForm.postalCode" />
            </el-form-item>
            <el-form-item label="收货人姓名">
                <el-input v-model="sizeForm.name" />
            </el-form-item>
            <el-form-item label="联系电话">
                <el-input v-model="sizeForm.tel" />
            </el-form-item>
            <div class="inpactive"><input type="checkbox">设为默认收货地址</div>
            <div class="active" @click="onSubmit">保存并使用</div>
        </el-form>
        <commodityCode />
        
    </div>
</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
const size = ref('default')
const labelPosition = ref('right')
const sizeForm = reactive({
    address: '',
    postalCode: '',
    region: '',
    name: '',
    tel: '',
    delivery: false,
})

function onSubmit() {
    console.log('submit!')
}
</script>
<script lang="ts">
import carTop from '@/components/personal/carTop.vue';
import commodityCode from '@/components/personal/commodityCode.vue';
// import navView from "@/components/navView.vue";

import { defineComponent } from 'vue';
export default defineComponent({
    components: { carTop ,commodityCode}

})
</script>

<style lang="scss" scoped>

.contanier {
    background-color: #fff;
}

.el-input {
    width: 350px;
}

.el-form {

    margin-left: 350px;
}

.el-radio-group {
    margin-right: 12px;
}
.inpactive {
    margin-left: 100px;
    margin-bottom: 20px;
    font-size: 12px;
    color: #333;
}

.active {
    margin-left: 100px;
    width: 140px;
    height: 36px;
    line-height: 36px;
    color: #fff;
    font-size: 14px;
    text-align: center;
    border: 1px solid #8c222c;
    background-color: #8c222c;
}

h3 {
    margin-left: 260px;
    margin-bottom: 30px;
    color: #333;
}
</style>